<template>
  <view class="preference-list">
    <view class="coupon-label">
      {{ info.title || "优惠明细" }}
      <image
        @click.stop="emits('close')"
        :src="ossImg('others/goods/close.png')"
      />
    </view>
    <view class="preference-container">
      <view class="item1">
        <view class="info_item">
          <view class="item_content">
            <view class="item_left">商品总价：</view>
            <view class="item_right">¥{{ info.totalPrice }}</view>
          </view>
        </view>
        <view class="info_item">
          <view class="item_content">
            <view class="item_left">优惠券：</view>
            <view class="item_right font-blue">
              - ¥{{ info.couponPrice || 0 }}
            </view>
          </view>
        </view>
      </view>
      <view class="item2">
        <view class="info_item">
          <view class="item_content">
            <view class="item_left">共优惠</view>
            <view class="item_right font-blue font-weight">
              - ¥{{ info.couponPrice || 0 }}
            </view>
          </view>
        </view>
        <view class="info_item">
          <view class="item_content">
            <view class="item_left"
              >合计<text class="text">（合计金额不含运费）</text></view
            >
            <view class="item_right font-weight"> ¥{{ info.finalPrice }} </view>
          </view>
        </view>
      </view>
    </view>
    <view class="coupon-action"> </view>
  </view>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from "vue";
import { ossImg } from "@/utils/utils";

const props = defineProps({
  info: {
    type: Object,
  },
});

const emits = defineEmits(["close"]);
</script>
<style lang="less" scoped>
@import "@/static/css/theme.less";

.coupon-action {
  button {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #0058c6;
    border-radius: 20px;
    color: white;
    font-size: 16px;

    &::after {
      border: none;
    }
  }
}

.preference-container {
  overflow: auto;
  height: 300px;
}

.preference-list {
  box-sizing: border-box;
  padding: 16px 16px 0 16px;

  .coupon-label {
    color: #2b2b2b;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: 32px;
    line-height: 1;

    image {
      width: 12px;
      height: 12px;
      display: block;
      right: 2px;
      top: 50%;
      transform: translate(0, -50%);
      position: absolute;
    }
  }
}

.item1 {
}

.item2 {
  margin-top: 50px;
  font-weight: 700;
}

.text {
  font-size: 14px;
  color: #999;
  font-weight: 500;
}

.font-blue {
  color: #0058c6;
}

.font-weight {
  font-weight: 500 !important;
}

.info_item {
  width: 100%;

  .item_content {
    box-sizing: border-box;
    padding: 10px 0px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;

    .item_left {
      margin: auto 0px;
    }

    .item_right {
      margin-right: 15px;
      height: 100%;
    }
  }
}
</style>
